<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="李军锋">
    <title></title>
    <style>
      a{
            color: inherit;
            font-size: inherit;
            text-decoration: none;
        }
        *{
            box-sizing: border-box;
        }
        .box{
            display: flex;
        }
        .box>div{
            margin-left: 10px;
            position: relative;
        }
        a{
            display: inline-block;
            width: 19px;
            height: 19px;
            background-image: url(star.png);
        }
        a.active{
            background-position: 0 -28px;
        }
        .box>div:hover .pingjia{
            display: block;
        }
        .pingjia{
            border: 1px solid red;
            font-size: 12px;
            position: absolute;
            left: 0;
            top: 20px;
            width: 120px;
            display: none;
        }

    </style>
</head>
<body>
    <div class="box">
        <span>宝贝与描述相符</span>
        <div>
            <a href="javascript:"></a>
            <a href="javascript:"></a>
            <a href="javascript:"></a>
            <a href="javascript:"></a>
            <a href="javascript:"></a>
            <div class="pingjia">五星好评</div>
        </div>
        <span class="result"></span>
    </div>
  <script src="jquery.js"></script>
</body>
</html>
<script>
  
  var msg = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ];
    // 展示星星
    // showStar(4)
    function showStar(num){
        // $('a').each(function(index){
        //     this.className = index<num ? 'active' : ''
            // if (index<num) {
            //     $('a').eq(index).addClass('active')
            // } else {
            //     $('a').eq(index).removeClass('active')
            // }
        // })
        $('a').each(function(index){
            this.className = index < num ? 'active' : '';
        })
    };
    var arr;
    var score = 0;
    $('a').each(function(index){
        $(this).mouseenter(function(){
            // console.log(index+1);
            showStar(index+1);
            $('.pingjia').html($(this)
            .index()+1+'分'+msg[$(this).index()])
            .css('color','red');
            arr = msg[$(this).index()];
            $('.pingjia').html
           (arr.split('|')[0]);
           $('.pingjia').html
           (arr.split('|')[1]);
        });
        $(this).click(function(){
            // 记录点击了几个 
           score = index + 1;
           arr = msg[$(this).index()];
           $('.result').html
           (arr.split('|')[0]);
            $('.result').html
           (arr.split('|')[1]);
        })

        $(this).mouseleave(function(){
            showStar(score);
        })
    });





</script>